<template>
  <div class="main">
    <div class="warning">
      <div class="warm ww">
        <img src="@/assets/imgs/report01.png" alt="warm" />
        <p class="label-text">告警信息</p>
        <p class="text">{{ alarmCount }}条</p>
      </div>
      <div class="fault ww">
        <img src="@/assets/imgs/report02.png" alt="fault" />
        <p class="label-text">故障信息</p>
        <p class="text">{{ faultCount }}条</p>
      </div>
    </div>
    <div class="record">
      <h2>报警记录</h2>
      <div class="content">
        <ul>
          <li v-for="(record, index) in alarmRecords" :key="index">
            {{ record }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alarmCount: 10, // 新增告警数量字段
      faultCount: 10, // 新增故障数量字段
      alarmRecords: [
        '2017年5月4日市A区12#机器气压过高报警',
        '上海市A区12#机器气压过高报警',
        '江苏省12#机器气压过高报警',
        '2017年5月4日市A区12#机器气压过高报警',
        '上海市A区12#机器气压过高报警',
        '江苏省12#机器气压过高报警',
      ],
    }
  },
  created() {
    // 这里可以添加从后端获取数据的逻辑
    // 示例模拟数据更新：
    setTimeout(() => {
      this.alarmCount = 15
      this.faultCount = 8
    }, 2000)
  },
}
</script>
<style scoped>
.main {
  height: 39vh;
  width: 35%;
  min-width: 300px; /* 新增最小宽度限制 */
  background-color: #0d2b55;
  position: absolute;
  right: 39%; /* 百分比单位更适配不同分辨率 */
  top: 160vh;
  margin-top: 10px;
}
.warning {
  height: 100%;
  width: 30%;
  float: left;
  border-right: 2px solid #3a4b6d;
}
.warning .ww {
  margin: 25px;
  margin-top: 30px;
  position: relative;
}

.label-text {
  color: red;
  font-size: 20px;
  position: absolute;
  left: 50%;
  top: 15%;
  bottom: 0;
  transform: translateX(-55%);
  white-space: nowrap;
}
.text {
  color: #fff;
  font-size: 20px;
  position: absolute;
  left: 47%;
  top: 40%;
  bottom: 0;
  transform: translateX(-55%);
  white-space: nowrap;
}
.record {
  height: 100%;
  width: 69%;
  float: right;
}
h2 {
  color: #00f6ff;
  text-align: center;
  margin-top: 15px;
  height: 15%;
}
.content ul li {
  color: red;
  margin-top: 10px;
}
</style>
